<!-- scaleBox + flex布局 -->

<template>
	<scaleScreen class="scale-wrap">
		<div class="container p-10 flex fd-column gap-10" :style="{
			width: width + 'px',
			height: height + 'px',
		}">
			<div class="header e-card"></div>
			<div class="body flex flex-1 fd-column gap-10">
				<div class="center flex-2 flex fd-row gap-10">
					<div class="c-left flex-1 flex fd-column gap-10">
						<div class="c-left1 e-card flex-1">
							<radar1Chart />
						</div>
						<div class="c-left2 e-card flex-1">
							<pie2Chart />
						</div>
					</div>
					<div class="c-center flex-2 flex">
						<div class="c-center1 e-card flex-1">
							<!-- <DistributionMap /> -->

							<div id="containerMap" :style="{ height: '100%' }"></div>
						</div>
					</div>
					<div class="c-right flex-1 flex fd-column gap-10">
						<div class="c-right1 e-card flex-1">
							<bar1Chart />
						</div>
						<div class="c-right2 e-card flex-1">
							<line1Chart />
						</div>
					</div>
				</div>
				<div class="bottom flex-1 flex fd-row gap-10">
					<div class="bottom1 e-card flex-1">
						<bar2Chart />
					</div>
					<div class="bottom2 e-card flex-2">
						<bar3Chart />
					</div>
					<div class="bottom3 e-card flex-1">
						<pie1Chart />
					</div>
				</div>
			</div>
		</div>
	</scaleScreen>
</template>

<script>
import scaleScreen from "@/components/scaleScreen";

import line1Chart from "@/views/echart/lineChart/line1";
import line2Chart from "@/views/echart/lineChart/line2";
import bar1Chart from "@/views/echart/barChart/bar1";
import bar2Chart from "@/views/echart/barChart/bar2";
import bar3Chart from "@/views/echart/barChart/bar3";
import gauge1Chart from "@/views/echart/gaugeChart/gauge1";
import gauge2Chart from "@/views/echart/gaugeChart/gauge2";
import pie1Chart from "@/views/echart/PieChart/pie1";
import pie2Chart from "@/views/echart/PieChart/pie2";
import radar1Chart from "@/views/echart/radarChart/radar1";

export default {
	components: {
		scaleScreen,
		line1Chart,
		line2Chart,
		bar1Chart,
		bar2Chart,
		bar3Chart,
		gauge1Chart,
		gauge2Chart,
		pie1Chart,
		pie2Chart,
		radar1Chart,
	},
	data() {
		return {
			width: screen.width,
			height: screen.height,
			//实时屏幕高度
			windowHeight: document.documentElement.clientHeight,
		};
	},

	mounted() {
		// 当浏览器被重置大小时执行
		window.onresize = () => {
			return (() => {
				this.windowHeight = document.documentElement.clientHeight;
			})();
		};
		//调用地图初始化方法
		this.initAMap();
	},
	methods: {
		initAMap() {
			let map = new AMap.Map("containerMap");
		},
	},
};
</script>

<style scoped lang="scss">
.e-card {
	border: 2px solid;
	border-image: linear-gradient(to right, #917667, #578aef) 1;
}

.container {
	$base-header-height: 100px;
	height: 100%;
	width: 100%;
	background: #03213d;
	// background-image: url("../../images/bg1.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	.header {
		height: #{$base-header-height};
	}
}
</style>
